﻿@page "/detailsListAutoPage"
@using Microsoft.AspNetCore.Components.Web
@using DynamicData
@using BlazorFluentUI.Lists

<PageTitle>DetailsListAuto | Blazor Fluent UI WebAssembly Demo</PageTitle>
<header class="root">
	<h1 class="title">DetailsListAuto</h1>
</header>
<div class="section" style="transition-delay: 0s;">
	<div id="overview" tabindex="-1">
		<h2 class="subHeading hiddenContent">Overview</h2>
	</div>
	<div class="content">
		<div class="ms-Markdown">
			<p>
				A details list (<code>DetailsList</code>) is a robust way to display an information-rich collection of items, and allow people to sort, group, and filter the content. Use a details list when information density is critical.
			</p>
		</div>
	</div>
</div>
<div class="section" style="transition-delay: 0s;">
	<div id="overview" tabindex="-1">
		<h2 class="subHeading">Usage</h2>
	</div>
	<div>
		<div class="subSection">
			<Demo MetadataPath="DetailsListAutoPage" Key="0" Header="DetailsListAuto with many options">
				<Stack Horizontal="true" Tokens="new StackTokens { ChildrenGap = new double[] { 10.0 } }">
					<Toggle Label="IsVirtualizing" OnText="true" OffText="false" @bind-Checked="isVirtualizing" />
					<Toggle Label="IsCompact" OnText="true" OffText="false" @bind-Checked="isCompact" />
					<Dropdown ItemsSource=@selectionModeOptions
							  @bind-SelectedOption=selectedModeOption
							  Style="max-width:300px;">
					</Dropdown>
					<DefaultButton OnClick=@(arg => selection1.SelectedItems = (new System.Collections.Generic.List<DataItem> { dataSource[2], dataSource[3] }) ) Text="Set #3 & #4 selected" />
				</Stack>
				<TextField Label="Filter Description"
						   Value=@filter
						   OnInput=@(val => { filter = val; descriptionColumn!.FilterPredicate = prop => (prop as string)!.Contains(filter); }) />
				<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
					<DetailsListAuto ItemsSource="dataSource"
									 IsVirtualizing=@isVirtualizing
									 TItem="DataItem"
									 Compact=@isCompact
									 Columns="columnsSource"
									 GetKey=@(x=>x.Key)
									 LayoutMode="DetailsListLayoutMode.Justified"
									 Selection="selection1"
									 SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), selectedModeOption?.Key!)) />
				</div>
			</Demo>
		</div>
		<div class="subSection">
			<Demo MetadataPath="DetailsListAutoPage" Key="1" Header="DetailsListAuto with Fixed Columns">
				<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
					<DetailsListAuto ItemsSource="dataSource"
									 IsVirtualizing="true"
									 Compact="true"
									 Columns="fixedColumnsSource"
									 GetKey=@(x=>x.Key)
									 LayoutMode="DetailsListLayoutMode.FixedColumns"
									 Selection="selection2"
									 SelectionMode=@((SelectionMode)Enum.Parse(typeof(SelectionMode), selectedModeOption?.Key!)) />
				</div>
			</Demo>
		</div>
		<div class="subSection">
			<Demo MetadataPath="DetailsListAutoPage" Key="2" Header="DetailsListAuto with MarqueeSelection">
				<div data-is-scrollable="true" style="height:400px;overflow-y:auto;">
					<MarqueeSelection Selection=@selection3>
						<DetailsListAuto ItemsSource="dataSource"
										 IsVirtualizing="true"
										 Compact="true"
										 Columns="columnsSource"
										 GetKey=@(x=>x.Key)
										 LayoutMode="DetailsListLayoutMode.Justified"
										 Selection="selection3"
										 SelectionMode="SelectionMode.Multiple" />
					</MarqueeSelection>
				</div>
			</Demo>
		</div>
		<div class="subSection">
			<Demo MetadataPath="DetailsListAutoPage" Key="3" Header="Custom grid with sort">
				<div data-is-scrollable="true" style="overflow-y:auto;margin-bottom:50px">
					<DetailsListAuto ItemsSource="itemSource" Columns="table"
									 IsVirtualizing="true" Compact="true"
									 TItem="CustomGrid"
									 GetKey=@(x=>x.Id)
									 LayoutMode="BlazorFluentUI.Lists.DetailsListLayoutMode.Justified"
									 Selection="tableSelection"
									 SelectionMode="SelectionMode.Multiple" />
				</div>>
			</Demo>
		</div>
	</div>
</div>



@code {

	bool isVirtualizing = true;
	bool isCompact = false;
	IDropdownOption? selectedModeOption;
	System.Collections.Generic.List<IDropdownOption>? selectionModeOptions;

	Selection<DataItem> selection1 = new Selection<DataItem>();
	Selection<DataItem> selection2 = new Selection<DataItem>();
	Selection<DataItem> selection3 = new Selection<DataItem>();

	System.Collections.Generic.List<CustomGrid> itemSource = new System.Collections.Generic.List<CustomGrid>();
	System.Collections.Generic.List<IDropdownOption> statuses = new System.Collections.Generic.List<IDropdownOption>();
	System.Collections.Generic.List<IDetailsRowColumn<CustomGrid>> table = new System.Collections.Generic.List<IDetailsRowColumn<CustomGrid>>();
	Selection<CustomGrid> tableSelection = new Selection<CustomGrid>();

	System.Collections.Generic.List<DataItem> dataSource = new();

	int count = 0;

	// We're creating another container for the column array that needs to be defined to show columns in DetailsList.
	System.Collections.Generic.List<IDetailsRowColumn<DataItem>> columnsSource = new();
	System.Collections.Generic.List<IDetailsRowColumn<DataItem>> fixedColumnsSource = new();

	string filter = "";
	DetailsRowColumn<DataItem, string>? descriptionColumn;


	protected override void OnInitialized()
	{
		selectionModeOptions = Enum.GetValues(typeof(SelectionMode)).Cast<SelectionMode>()
					.Select(x => new DropdownOption { Key = x.ToString(), Text = x.ToString() })
					.Cast<IDropdownOption>()
					.ToList();
		selectedModeOption = selectionModeOptions.FirstOrDefault(x => x.Key == "Single");

		// We load the column data into the columnsSource SourceCache.
		columnsSource.Add(new DetailsRowColumn<DataItem, int>("Key", x => x.KeyNumber) { MinWidth = 20, MaxWidth = 70, Index = 0, IsResizable = true });
		columnsSource.Add(new DetailsRowColumn<DataItem, string>("Name", x => x.DisplayName!) { Index = 1, MinWidth = 100, MaxWidth = 150, IsResizable = true });
		descriptionColumn = new DetailsRowColumn<DataItem, string>("Description", x => x.Description!) { Index = 2 };
		columnsSource.Add(descriptionColumn);

		fixedColumnsSource.Add(new DetailsRowColumn<DataItem, int>("Key", x => x.KeyNumber) { Index = 0 });
		fixedColumnsSource.Add(new DetailsRowColumn<DataItem, string>("Name", x => x.DisplayName!) { Index = 1 });
		fixedColumnsSource.Add(new DetailsRowColumn<DataItem, string>("Description", x => x.Description!) { Index = 2 });

		statuses.Add(new DropdownOption { ItemType = SelectableOptionMenuItemType.Normal, Key = "1", Text = "Active" });
		statuses.Add(new DropdownOption { ItemType = SelectableOptionMenuItemType.Normal, Key = "2", Text = "Suspend" });

		table.Add(new DetailsRowColumn<CustomGrid, string>("name", x => x.Name) { Index = 1, MinWidth = 300, MaxWidth = 700, IsResizable = true });
		table.Add(new DetailsRowColumn<CustomGrid, string>("lastname", x => x.Lastname) { Index = 2, MinWidth = 300, MaxWidth = 760, IsResizable = true });
		table.Add(new DetailsRowColumn<CustomGrid, string>("status", x => x.Status) { Index = 3, MinWidth = 80, MaxWidth = 80, IsResizable = true });
		table.Add(new DetailsRowColumn<CustomGrid, string>("second status", x => x.Secondstatus)
		{
			Index = 4,
			MinWidth = 130,
			MaxWidth = 130,
			IsResizable = false,
			ColumnItemTemplate = response =>
	@<DropDownGridColumn row="response" statuses="statuses"></DropDownGridColumn>
		});
		table.Add(new DetailsRowColumn<CustomGrid, int>("amount", x => x.Amount)
		{
			Index = 5,
			MinWidth = 100,
			MaxWidth = 100,
			IsResizable = false,
			ColumnItemTemplate = response =>
	@<NumericTextField @bind-Value="response.Amount" @onfocusout="(()=>inputChangeCheck())" Required="true"></NumericTextField>
		});

		// We're loading our sample data into the dataSource SourceCache.
		for (var i = 0; i < 100; i++)
		{
			count++;
			dataSource.Add(new DataItem(count));
			itemSource.Add(new CustomGrid { Id = Guid.NewGuid().ToString(), Amount = (i * 10), Name = $"name {i}", Lastname = $"lastname {i}", Secondid = Guid.NewGuid(), Status = statuses.First().Text!, Secondstatus = statuses.First(), Type = "type", Visible = true });
		}


		base.OnInitialized();
	}


	private void inputChangeCheck()
	{
		Console.WriteLine("Write in console.");
	}
}